<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>人流量监管云平台</title>
<script th:src="@{~/static/bootstrap/js/jquery-3.4.1.min.js}"></script>
<link th:href="@{~/static/bootstrap/css/bootstrap.css}" rel="stylesheet"/>
<script th:src="@{~/static/bootstrap/js/bootstrap.js}"></script>
<link th:href="@{~/static/bootstrap/css/bootstrap.css}" rel="stylesheet"/>
<link th:href="@{~/static/layui/css/layui.css}" rel="stylesheet"/>
<!--<script th:src="@{~/static/layui/layui.all.js}"></script>-->
<script th:src="@{~/static/layer/layer.js}"></script>

<style>
    body {
        background: url("static/images/background.jpg");
    }

    #left {
        position: absolute;
        width: 100%;
        background: #fff;
        height: 300px;
        top: 25%;
        padding-top: 40px;
        padding-left: 100px;
    }

    #right {
        top: 22%;
        position: absolute;
        width: 400px;
        background: #fff;
        height: 400px;
        border-radius: 6px;
        left: 60%;
        padding-top: 20px;
        border: 1px solid #eee;
    }

</style>
</head>
<body>
<div id="left">
    <div style="position: absolute; width: 100%;background: #fff;height: 280px;top: 25%;padding-top: 40px;    padding-left: 100px;">
        <img alt="" src="static/images/picture.png" style=" width: 30%;height: 180px;float: left;">
    </div>
</div>
<div id="right" class="container">
    <div class="page-header">
        <h1 class="text-center" style="font-family: 华文楷体">人流量监管云平台</h1>
    </div>
    <div class="container" style="width: 90%; margin: auto;">
        <div class="tab-pane fade in active" id="userLogin">
            <div class="row">
                <div class="form-inline">
                    <label style="width: 60px;text-align: right">账号</label>
                    <input name="account" class="form-control" id="account" placeholder="请输入您的账号">
                </div>
            </div>
            <br>
            <div class="row">
                <div class="form-inline">
                    <label style="width: 60px;text-align: right">密码:</label>
                    <input name="password" type="password" class="form-control" id="password"
                           placeholder="请输入您的密码"/>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="form-inline">
                    <label style="width: 60px;text-align: right">验证码:</label>
                    <input type="text" id="code" name="code" class="form-control" style="width: 30%;"/>
                    <img id="generateCode" th:src="@{/code/getCaptchaCode}" width="80px" height="30px"
                         onclick="this.src='/code/getCaptchaCode?d='+new Date()*1">

                </div>
            </div>
            <br>
            <div class="row">
                <div class="form-inline" style="width: 80%; padding-left: 8%;">
                    <button onclick="login()" class="btn btn-info btn-lg btn-block col-sm-3">登录
                    </button>
                    <button onclick="register()" class="btn btn-info btn-lg btn-block col-sm-3">注册
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">

    function register() {
        window.location.href = "/register";
    }

    function login() {
        console.log('start')
        var account = $("#account").val();
        var password = $("#password").val();
        var code = $("#code").val();
        if (account == null || account == "") {
            layer.msg('账号不能为空')
            $("#account").focus();
        } else if (password == null || password == "") {
            layer.msg('密码不能为空')
            $("#password").focus();
        } else if (code == null || code == "" || code.length != 4) {
            layer.msg('验证码为4位字母或数字')
            $("#code").focus();
        } else {
            $.ajax({
                type: 'post',
                url: 'login',
                async: false,
                data: {
                    'account': account,
                    'password': password,
                    'code': code
                },
                success: function (result) {
                    result = parseInt(result)
                    if (result == 1) {
                        // layer.msg('登录成功');
                        window.location = "/main";

                    } else if (result == 0) {
                        layer.msg('请检查账号和密码')
                        $("#generateCode").click();//更改验证码
                    } else if (result == -1) {
                        layer.msg('验证码错误');
                        $("#generateCode").click();//更改验证码
                    }

                },
                error: function () {
                    alert("error");
                }
            });
        }
        return true;
    }
</script>

</html>